<template>
	<div style="padding: 2%;">
		<!-- 搜索表单 -->
		<el-form :inline="true" class="demo-form-inline">
			<el-form-item label="分类名称">
				<el-input v-model="name" placeholder="请输入分类名称"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="searchCategoryByName()">查询</el-button>
				<el-button type="primary" @click="add()">添加</el-button>
			</el-form-item>
		</el-form>

		<!-- 数据表格 -->
		<el-table :data="list" border style="width: 100%">
			<el-table-column prop="id" label="ID" width="180"></el-table-column>
			<el-table-column prop="name" label="分类名称" width="180"></el-table-column>
			<el-table-column prop="desc" label="分类描述"></el-table-column>
			<el-table-column align="center" label="操作" min-width="30">
				<template slot-scope="scope">
					<el-button type="text" @click="change(scope.row.id)">编辑</el-button>
					<el-button type="text" @click="del(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination background style="margin-top: 10px" align="right" layout="prev, pager, next" :current-page.sync="currentPage"
		 :page-size="pageSize" @current-change="getAllCategory" :total="total"></el-pagination>
		<!-- 删除模态框 -->
		<div class="dct_camera">
			<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
				<span>确定要删除吗？</span>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button @click="delCategoryById()" type="primary">确 定</el-button>
				</span>
			</el-dialog>
		</div>

		<!-- 编辑模态框 -->
		<div class="dct_camera">
			<el-dialog title="分类" :visible.sync="dialogVisible1" width="30%">
				<el-form label-width="80px" label-position="left">
					<el-form-item label="分类名称">
						<el-input placeholder="请输入分类名称" v-model="name" />
					</el-form-item>
					<el-form-item label="分类描述">
						<el-input placeholder="请输入分类描述" v-model="desc" />
					</el-form-item>
					<div style="text-align:right;">
						<el-button type="danger" @click="dialogVisible1 = false">取消</el-button>
						<el-button type="primary" @click="submitChange()">提交</el-button>
					</div>
				</el-form>
			</el-dialog>
		</div>

		<!-- 添加模态框 -->
		<div class="dct_camera">
			<el-dialog title="分类" :visible.sync="dialogVisible2" width="30%">
				<el-form label-width="80px" label-position="left">
					<el-form-item label="分类名称">
						<el-input placeholder="请输入分类名称" v-model="name" />
					</el-form-item>
					<el-form-item label="分类描述">
						<el-input placeholder="请输入分类描述" v-model="desc" />
					</el-form-item>
					<!-- 添加按钮 -->
					<div style="text-align:right;">
						<el-button type="danger" @click="dialogVisible2 = false">取消</el-button>
						<el-button type="primary" @click="addCategory()">添加</el-button>
					</div>
				</el-form>
			</el-dialog>
		</div>

	</div>
</template>
<script>
	import CategoryApi from '@/api/category'
	export default {
		inject: ['reload'],
		data() {
			return {
				currentPage: 1,
				pageSize: 5,
				total: 0,
				dialogVisible: false,
				dialogVisible1: false,
				dialogVisible2: false,
				categoryId: 0,
				name: "",
				desc: "",
				// 查询名字
				InName: '',
				list: [{
						"id": 1,
						"name": "精选",
						"desc": "真的好看"
					},
					{
						"id": 2,
						"name": "精选",
						"desc": "真的好看"
					},
					{
						"id": 3,
						"name": "精选",
						"desc": "真的好看"
					},
				]
			}
		},
		created() {
			this.getAllCategory()
		},
		methods: {
			getAllCategory() {
				CategoryApi.getAllCategories(this.currentPage, this.pageSize).then(resp => {
					this.list = resp.data.list
					this.total = resp.data.total
				})
			},
			del(id) {
				this.dialogVisible = true
				this.categoryId = id
			},
			delCategoryById() {
				console.log(this.categoryId)
				CategoryApi.delCategoryById(this.categoryId).then(resp => {
					//提示信息
					this.$message({
						message: "删除成功",
						type: "success"
					})
					//关闭模态框
					this.dialogVisible = false
					//页面刷新
					this.reload()
				})
			},
			change(id) {
				this.categoryId = id
				// 应该把对话框显示的操作放在获取数据成功之后
				CategoryApi.getCategoryById(id).then(resp => {
					this.name = resp.data.name
					this.desc = resp.data.desc
					this.dialogVisible1 = true
				})
			},
			submitChange() {
				let data = {
					"id": this.categoryId,
					"name": this.name,
					"desc": this.desc
				}
				CategoryApi.addCategory(data).then(resp => {
					//提示信息
					this.$message({
						message: "编辑成功",
						type: "success"
					})
					//关闭模态框
					this.dialogVisible1 = false
					//页面刷新
					this.reload()
				})
			},
			add() {
				this.dialogVisible2 = true
			},
			addCategory() {
				var data = {
					"name": this.name,
					"desc": this.desc
				}
				CategoryApi.addCategory(data).then(resp => {
					//提示信息
					this.$message({
						message: "添加成功",
						type: "success"
					})
					//关闭模态框
					this.dialogVisible2 = false
					//页面刷新
					this.reload()
				})
			},
			// 根据分类名称查询
			searchCategoryByName() {
				CategoryApi.searchArticleByName(this.name,this.currentPage, this.pageSize).then(resp => {
					this.list = resp.data.list
					console.log(this.list)
					this.name = ''
					this.currentPage=resp.data.currentPage
					this.total=resp.data.total
				})
			}

		}
	}
</script>
<style>
</style>
